<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>骑行中</title>
		<script src="https://webapi.amap.com/maps?v=2.0&key=c3c057ab4d7ccd79dec0c0a02bcf0c20"></script>
	</head>
	<body class="sportring">
		<main>
			<!-- 标题 -->
			<section class="titlebox">
				<p class="title">户外骑行</p>
				<p class="b-title">运动中</p>
			</section>
			<!-- 公里数 -->
			<section class="metrebox"><span id="metre">0.000</span>公里</section>
			<!-- 提醒 -->
			<section class="remindbox">
				<p class="text">GPS信号低，数据精准度低</p>
				<span class="iconfont icon-ditu"></span>
			</section>
			<!-- 指示表 -->
			<section class="meterbox">
				<ul>
					<li class="speedbox">
						<span class="iconfont icon-gongyezujian-yibiaopan"></span>
						<span>配速</span>
						<span id="speed">2米/秒</span>
					</li>
					<li class="timebox">
						<span class="iconfont icon-shizhong"></span>
						<span>用时</span>
						<span id="time">3</span>
					</li>
					<li class="caloriebox">
						<span class="iconfont icon-huoyan"></span>
						<span>千卡</span>
						<span id="calorie">2.57</span>
					</li>
				</ul>
			</section>
			<!-- 暂停开关 -->
			<section class="pausebox">
				<span class="iconfont icon-tuiguangzhong" id="begin"></span>
				<span class="iconfont icon-zanting1" id="pause"></span>
				<span class="iconfont icon-jieshu" id="end"></span>
			</section>
		</main>
	</body>
</html>
